<template>
  <div class="page">
    <div class="nav_container">
      <mynav></mynav>
    </div>
    <!-- <banner></banner> -->
    <div class="banner">
      <img src="../../../static/images/qklzx_mobile.jpg" class="mobile">
      <img src="../../../static/images/qklzx_pc.jpg" class='pc'>
    </div>
    <div class="container context_container">
      <div class="row">
        <div class="col-12 col-md-3">
          <div
            class="nav flex-column nav-pills let-nav"
            id="v-pills-tab"
            role="tablist"
            aria-orientation="vertical"
          >
            <a
              class="nav-link active"
              id="v-pills-home-tab"
              data-toggle="pill"
              href="#v-pills-home"
              role="tab"
              aria-controls="v-pills-home"
              aria-selected="true"
              >区块链资讯</a
            >
            <a
              class="nav-link"
              id="v-pills-profile-tab"
              data-toggle="pill"
              href="#v-pills-profile"
              role="tab"
              aria-controls="v-pills-profile"
              aria-selected="false"
              >行情预测</a
            >
          </div>
        </div>
        <div class="col-12 col-md-9">
          <div class="tab-content right-content" id="v-pills-tabContent">
            <div
              class="tab-pane fade show active"
              id="v-pills-home"
              role="tabpanel"
              aria-labelledby="v-pills-home-tab"
            >
              <article-lists :param="{category:'1', kind:'0',}"></article-lists>
            </div>
            <div
              class="tab-pane fade"
              id="v-pills-profile"
              role="tabpanel"
              aria-labelledby="v-pills-profile-tab"
            >
              <article-lists :param="{category:'1', kind:'1',}"></article-lists>
            </div>
          </div>
        </div>
      </div>
    </div>
    <myfooter></myfooter>
  </div>
</template>

<script>
import mynav from "@/components/nav";
import myfooter from "@/components/footer";
import banner from "@/components/banner";
import articleLists from "@/components/articlelist";
export default {
  components: {
    mynav,
    banner,
    articleLists,
    myfooter
  },
  data() {
    return {
      param: { },
    };
  },
  created() {},
  watch: {},
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.page {
  .nav_container {
    background: #382fba;
    width: 100%;
    height: 74px;
  }

  .w-100 {
    width: 1920px;
    height: 500px;
  }

  .context_container {
    margin: 15px auto;
    font-size: 14px;

    .let-nav {
      border: 1px solid #f5f5f5;
      box-shadow: 1px 1px 10px 10px #f6f6f6;

      // max-width:200px;
      > a {
        width: 100%;
        margin: 5px auto;
      }
    }

    .right-content {
      border: 1px solid #f5f5f5;
      box-shadow: 1px 1px 10px 10px #f6f6f6;

      .media {
        margin: 15px 0px;
        .media-body {
          text-align: left;
          color: #000;
          h5 {
            font-weight: 1000;
          }
        }
      }

      > div {
        padding: 15px;
      }

      h3 {
        margin: 15px;
      }
    }
  }
}
</style>
